<template>
    <div>
        <view class="collapse-container" v-for="(item, index) in data">
            <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
                 情况一：有子集的情况：-->
            <uni-collapse-item
                    @click.native="handleHeight"
                    show-animation
                    :key="index"
                    :title="item.title"
                    :open="true"
                    v-if="item.subList.length > 0">

                <my-item @use-resize="handleHeight" class="sub-list" :data="item.subList"></my-item>
            </uni-collapse-item>
            <!-- 情况二：没子集的情况 -->
            <uni-collapse-item
                    show-animation
                    @click.native="handleHeight"
                    :key="index"
                    :open="true"
                    v-else
                    :title="item.title">
            </uni-collapse-item>
        </view>
    </div>
</template>

<script>
    import UniCollapse from "../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";
    import UniCollapseItem from "../uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue";

    export default {
        name: "myItem",
        components: {
            UniCollapseItem,
            UniCollapse
        },
        props: {
            data: {
                type: Array,
                default: [],
            }
        },

        data() {
            return {}
        },
        mounted() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$emit('use-resize');
                }, 500)
            });
        },
        methods: {
            handleHeight() {
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.$emit('use-resize');
                    }, 300)
                });
            },
        },
    };
</script>

<style>
    .sub-list {
        margin-left: 6vw; /* 子列表左侧内边距 */
    }
</style>
